<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/libs/layui/css/layui.css}">
</head>
<body>
        <form class="layui-form" action="/register" method="post">
            姓名: <input lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input" type="text" name="username"><br>
            邮箱:<input  lay-verify="email" autocomplete="off" placeholder="请输入电子邮箱" class="layui-input" type="text" name="email"><br>
            密码:<input  lay-verify="required|pass" class="layui-input" type="password" name="password"><br>

            确认密码:<input type="password" lay-verify="required|confirmPass" class="layui-input"><br>



            <input type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" value="提交">

        </form><br>






</body>
</html>
<script type="text/javascript" th:src="@{/libs/jquery/jquery-3.5.1.js}"></script>
<script th:src="@{/libs/layui/layui.js}"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;
        var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
            , layer = layui.layer;
        //自定义验证规则
        form.verify({

            title: function (value) {
                if (value.length < 5) {
                    return '用户名至少得5个字符啊';
                }
            },
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ],
            confirmPass: function (value) {
                if ($('input[name=password]').val() !== value)
                    return '两次密码输入不一致！';
            }
        });

        //监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            return true;
        });
    });
</script>

